<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件驱动</title>
</head>

<body>
    <div>
        <div>
            数量 <input type="text" id="goodsnum" />
        </div>
        <div>
            价格 <input type="text" id="goodsprice" />
        </div>
        <div>
            小计 <span id="total"></span>
        </div>

    </div>
</body>
<script>
    let goodsnumInput = document.getElementById("goodsnum");
    let goodspriceInput = document.getElementById("goodsprice");
    let totalSpan = document.getElementById("total");

    let goodsinfo = {
        //表示一个对象
    }
    // oninput 事件  
    // oninput 事件在用户输入时触发。
    // 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。


    let _goodsnum = 0;
    let _goodsprice = 0;

    Object.defineProperty(goodsinfo, "goodsnum", {

        get() {//取值

            return _goodsnum;

        },
        set(num) {//赋值

            _goodsnum = num;
            complier();

        }

    })

    Object.defineProperty(goodsinfo, "goodsprice", {
        get() {

            return _goodsprice;

        },
        set(price) {
            _goodsprice = price;
            complier();

        }

    })

    function complier() {

        totalSpan.innerHTML = goodsinfo.goodsnum * goodsinfo.goodsprice;


    }


    goodsnumInput.oninput = function () {
        goodsinfo.goodsnum = goodsnumInput.value * 1;
    }

    goodspriceInput.oninput = function () {

        goodsinfo.goodsprice = goodspriceInput.value * 1;
    }







</script>

</html>